import React from 'react'
import { useThemeStore } from '@/stores/themeStore'

export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'danger' | 'outline'
  size?: 'sm' | 'md' | 'lg'
  loading?: boolean
  children: React.ReactNode
}

const Button: React.FC<ButtonProps> = ({
  variant = 'primary',
  size = 'md',
  loading = false,
  disabled,
  children,
  className = '',
  ...props
}) => {
  const themePreference = useThemeStore((state) => state.theme)
  const isDark = React.useMemo(() => {
    if (themePreference === 'dark') return true
    if (themePreference === 'light') return false
    return window.matchMedia('(prefers-color-scheme: dark)').matches
  }, [themePreference])

  const baseClasses = `inline-flex items-center justify-center font-medium rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed ${isDark ? 'focus:ring-offset-slate-900' : 'focus:ring-offset-white'}`
  const darkPrimary = 'bg-slate-600 hover:bg-slate-500 text-white'
  const darkSecondary = 'bg-slate-700 hover:bg-slate-600 text-slate-100'
  const darkDanger =   'bg-red-600 hover:bg-red-500 text-white'
  const darkOutline =  'border border-slate-400 text-slate-100 hover:bg-slate-700'

  const variantClasses = {
    primary: isDark ? darkPrimary : 'bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white shadow-md hover:shadow-lg focus:ring-blue-500 transform hover:scale-105 active:scale-95',
    secondary: isDark ? darkSecondary : 'bg-gradient-to-r from-gray-500 to-gray-600 hover:from-gray-600 hover:to-gray-700 text-white shadow-md hover:shadow-lg focus:ring-gray-500 transform hover:scale-105 active:scale-95',
    danger: isDark ? darkDanger : 'bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white shadow-md hover:shadow-lg focus:ring-red-500 transform hover:scale-105 active:scale-95',
    outline: isDark ? darkOutline : 'border-2 border-blue-500 text-blue-600 hover:bg-gradient-to-r hover:from-blue-50 hover:to-blue-100 focus:ring-blue-500 transform hover:scale-105 active:scale-95 font-semibold'
  }
  
  const sizeClasses = {
    sm: 'px-4 py-2 text-sm rounded-lg',
    md: 'px-5 py-2.5 text-base rounded-xl',
    lg: 'px-7 py-3.5 text-lg rounded-xl'
  }
  
  const classes = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`
  
  return (
    <button
      className={classes}
      disabled={disabled || loading}
      {...props}
    >
      {loading ? (
        <>
          <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-current" fill="none" viewBox="0 0 24 24">
            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
            <path className="opacity-75" fill="currentColor" d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
          </svg>
          加载中...
        </>
      ) : (
        children
      )}
    </button>
  )
}

export default Button
